<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
<title>文件上传进度条</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<script type="text/javascript">
		window.addEventListener('message', function(event){
			let data = event.data.data;
			let file = event.data.file;
            preuploadFile(data, function(response) {
                if (response.flag) {
                    var result = {};
                    result.code = 2;
                    result.data = response.data;
                    top.postMessage(result, "*");
                } else {
                	let formData = new FormData();
                    formData.append("file", file);
                    formData.append("ciphertext", data.ciphertext);
                    uploadFile(data.userId, formData);
                }
            });
	    }, false);
		
		function preuploadFile(data, successFunc) {
		    post('/encrypts/files/preload/'+data.userId, data.ciphertext, function(data, textStatus, jqXHR) {
                    successFunc(data);
                }, );
                
			$.ajax({
				  type: 'POST',
				  url: '/encrypts/files/preload/'+data.userId,
				  data: data.ciphertext,
				  //dataType: "text",
				  success: function(data, textStatus, jqXHR) {
					successFunc(data);
				},
				error: function(jqXHR) {
					console.error(jqXHR);
				}
			});
		};
		
		function uploadFile(userId, formData) {
			$.ajax({
                type: "POST",
                url: '/encrypts/files/upload/'+userId,
                data: formData,
                processData: false,
                contentType: false,
                xhr: function () {
               	 var xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        //处理进度条的事件
                        xhr.upload.addEventListener("progress", function(e) {
                       		var curr=e.loaded;
                			var total=e.total;
                			var process = Math.floor((curr / total) * 100);
                			
                			var result = {};
                			result.code = 0;
                			result.data = process
                			top.postMessage(result, "*");
        				 }, false);
                    }
                    
                  	//加载完成的事件
                    xhr.addEventListener("load", function(e) {
                   		var result = {};
            			result.code = 1;
            			top.postMessage(result, "*");
    				 }, false);
                    
                    //加载出错的事件
                    xhr.addEventListener("error", function(e) {
                   	var result = {};
            			result.code = -1;
            			top.postMessage(result, "*");
    				 }, false);
                    
                    //加载取消的事件
                    xhr.addEventListener("abort", function(e) {
                   	var result = {};
            			result.code = -2;
            			top.postMessage(result, "*");
    				 }, false);
                    
                    return xhr;
                },
                success: function (data) {
               	 	var result = {};
         			result.code = 2;
         			result.data = data;
         			top.postMessage(result, "*");
                },
                failure: function (data) {
                	console.info(data);
                	var result = {};
                    result.code = -1;
                    result.data = jqXHR.responseText;
                    top.postMessage(result, "*");
                },
                error: function(jqXHR) {
                	console.info(jqXHR);
               	 	var result = {};
         			result.code = -1;
         			result.data = jqXHR.responseText;
         			top.postMessage(result, "*");
                }
            });
		};
	</script>
</body>
</html>